<template>
  <view>
    <nav-bar title="康复师登录"></nav-bar>
    <view class="form-box">
      <view class="title">欢迎您使用博奥美迪</view>
      <u-form :model="loginForm" :rules="rules" ref="loginFormRef" labelWidth="0">
        <u-form-item
          prop="username"
          borderBottom
        >
          <view class="label">账号</view>
          <u-input
            v-model="loginForm.username"
            border="none"
            placeholder="请输入账号"
          ></u-input>
        </u-form-item>
        <u-form-item
          prop="password"
          borderBottom
        >
          <view class="label">密码</view>
          <u-input
            v-model="loginForm.password"
            :password="showPassword"
            border="none"
            placeholder="请输入密码"
          >
            <template slot="suffix">
              <uni-icons type="eye-slash" v-if="showPassword" @click="changePassword(false)"></uni-icons>
              <uni-icons type="eye" v-else @click="changePassword(true)"></uni-icons>
            </template>
          </u-input>
        </u-form-item>
      </u-form>
      <view class="bottom-box">
        <uni-icons
          v-if="!isAgree"
          type="circle"
          :size="20"
          color="#999999"
          class="icon"
          @click="clickReadIcon"
        ></uni-icons>
        <uni-icons
          v-else
          type="checkbox-filled"
          :size="20"
          color="#115BAA"
          class="icon"
          @click="clickReadIcon"
        ></uni-icons>
        <view class="read-text" @click="clickReadIcon">
          阅读并同意博奥美迪<text class="red-text" @click.stop="clickViewService">《用户服务协议》</text>
          和<text class="red-text" @click.stop="clickPrivacy">《用户隐私协议》</text>
        </view>
      </view>
      <view class="login-btn" @click="clickLogin">登录</view>
    </view>
    <you-popup
      dialogWidth="90vw"
      :popupVisible="servicePopup"
      :popupTitle="popupTitle"
      :showBtn="false"
	    @popupClose="servicePopup = false"
    >
      <template #popupContent>
        <view class="dialog-content">
          <scroll-view scroll-y class="service-box">
            <view class="service-content">
              <rich-text class="text" :nodes="serviceContent"></rich-text>
            </view>
          </scroll-view>
          <view class="close-btn" @click="clickAlView">确定</view>
        </view>
      </template>
    </you-popup>
  </view>
</template>

<script>
  import api_login from '@/api/login'
  import api_user from '@/api/user'
  import { setToken } from '@/utils/auth'
  export default {
    name: 'PhysicianLogin',
    data() {
      const userNameValid = (rule, value, callback) => {
				/^[\da-z]+$/i.test(value) ? callback() : callback(new Error('请输入正确的用户名'))
			}
      const passwordValid1 = (rule, value, callback) => {
				/^\S{6,}$/.test(value) ? callback() : callback(new Error('密码不得少于6位'))
			}
      const passwordValid2 = (rule, value, callback) => {
				/^[\da-z]+$/i.test(value) ? callback() : callback(new Error('密码只能输入字符和数字'))
			}
      return {
        isAgree: false,
        loginForm: {
          username: '',
          password: ''
        },
        showPassword: true,
        rules: {
          username: [
            { required: true, message: '请输入您的用户名', trigger: 'blur' },
            { validator: userNameValid, message: '请输入正确的用户名', trigger: ['change', 'blur'] }
          ],
          password: [
            { required: true, message: '请输入您的密码', trigger: 'blur' },
            { validator: passwordValid1, message: '密码不得少于6位', trigger: ['change', 'blur'] },
            { validator: passwordValid2, message: '密码只能输入字符和数字', trigger: ['change', 'blur'] }
          ]
        },
        servicePopup: false,
        popupTitle: '用户服务协议',
        serviceContent: ''
      }
    },
    onReady() {
      this.$refs.loginFormRef.setRules(this.rules)
    },
    methods: {
      clickReadIcon() {
        this.isAgree = !this.isAgree
      },
      //点击查看密码
      changePassword(showPassword) {
        this.showPassword = showPassword
      },
      clickViewService() {
        const params = {
          id: 10
        }
        api_user.fetchNewsDetail(params).then(res => {
          if (res.code !== 200) return
          this.serviceContent = res.data.content && res.data.content.replace(/\n/g, '<br/>')
          this.popupTitle = '用户服务协议'
          this.servicePopup = true
        })
      },
      clickPrivacy() {
        const params = {
          id: 14
        }
        api_user.fetchNewsDetail(params).then(res => {
          if (res.code !== 200) return
          this.serviceContent = res.data.content && res.data.content.replace(/\n/g, '<br/>')
          this.popupTitle = '用户隐私协议'
          this.servicePopup = true
        })
      },
      clickAlView() {
        this.isAgree = true
        this.servicePopup = false
      },
      clickLogin() {
        if (!this.isAgree) return uni.showToast({
          title: '请先阅读并同意《用户服务协议》和《用户隐私协议》！',
          icon: 'none'
        })
        this.$refs.loginFormRef.validate().then(res => {
          const params = {
            ...this.loginForm
          }
          api_login.login(params).then(res => {
            if (res.code !== 200) return
            setToken(res.token)
            api_login.fetchUserInfo().then(res => {
              if (res.code !== 200) return
              const userInfo = {
                baUserId: res.baUser.id,
                ...res.baUser,
                ...res.doctorInfo
              }
              uni.setStorageSync('allUserInfo', userInfo)
            })
            uni.setStorageSync('identify', 'physician')
            uni.navigateTo({
              url: '/pages/physicianIndex'
            })
          })
        }).catch(errors => {
          uni.$u.toast('请将表单填写完整')
        })
      }
    }
  }
</script>
<style lang="scss">
  .form-box {
    height: 100vh;
    padding: 0 50rpx;
    background-color: #FFF;
    .title {
      padding: 100rpx 0;
      font-size: 44rpx;
      font-weight: 500;
    }
    .label {
      margin-bottom: 20rpx;
      font-size: 32rpx;
      font-weight: 500;
    }
  }
  ::v-deep.u-form {
    .u-input,
    .u-input__content,
    .u-input__content__field-wrapper {
      display: flex;
      align-items: center;
      height: 80rpx;
      padding: 0 20rpx;
      border-radius: 40rpx !important;
      background-color: #f8f8f8;
    }
    .u-line {
      display: none;
    }
  }
  .bottom-box {
    display: flex;
    margin: 70rpx 0;
    .icon {
      margin-right: 12rpx;
    }

    .read-text {
      font-size: 28rpx;
      font-weight: 500;
      color: #444;

      .red-text {
        color: #2F6FB4;
      }
    }
  }
  .login-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 94rpx;
    border-radius: 48rpx;
    font-size: 32rpx;
    border: 2rpx solid #115BAA;
    color: #FFF;
    background-color: #115BAA;
  }
  .dialog-content {
    padding-bottom: 36rpx;
    .service-box {
      max-height: 55vh;
      .service-content {
        padding: 30rpx 40rpx;
        .text {
          width: 100%;
        }
      }
    }
    .close-btn {
      width: 80%;
      height: 70rpx;
      margin: 40rpx auto 0;
      border-radius: 35rpx;
      text-align: center;
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 70rpx;
      color: #FFFFFF;
      background: #115BAA;
    }
  }
</style>
